<template>
    <view class="page">
        <view class="null" v-if="dataList.length==0">
            暂无需求消息~
        </view>
        <view class="page-needs-item" v-for="(item,index) in dataList" :key="index" @click="skipNeedsDetail(item.demand_id)">
            <view class="needs-header">
                <view class="needs-header-center">
<!--                    <text class="red">{{item.title}}</text>-->
                    <text :style="{'color':item.color}">{{item.title}}</text>
                </view>
                <view class="needs-header-right">
                    <text>{{item.created_at.split(' ')[0]}}</text>
                </view>
            </view>
            <view class="needs-content">
                <view class="needs-content-left" v-if="item.img_url.length>0">
                    <img :src="item.img_url" />
                </view>
                <view :class="item.img_url.length>0?'needs-content-right':'needs-content-text'">
                    {{item.content}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "needsMessage",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                type: '',
                dataList: []
            }
        },
        onLoad(query){
            this.type = query.type;
            this.getMessageList();
        },
        methods:{
            //获取系统消息列表
            async getMessageList(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    type: this.type
                }
                const res = await this.$api.getMessageList(params);
                if (res.data.level == 'success'){
                    this.dataList = res.data.data
                }
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding: 30rpx;
        height: calc(100vh - 60rpx);
        background: #F8F8F8;
    }
    .page-needs-item{
        width: 100%;
        background: #FFFFFF;
        border-radius: 10rpx;
        box-shadow: 0rpx 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 30rpx;
        .needs-header{
            height: 80rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 1rpx solid #E5E5E5;
            padding:0 30rpx;
            .needs-header-left{
                width: 50rpx;
                height: 50rpx;
                margin: 0 15rpx;
                border-radius: 360rpx;
                overflow: hidden;
            }
            .needs-header-center{
                color: #333333;
                width: 70%;
                text{
                    width: 100%;
                    font-size: 30rpx;
                    line-height: 42rpx;
                    height: 42rpx;
                    @include ellipsis(1);
                }
            }
            .needs-header-right{
                margin-left: auto;
                color: #9B9B9B;
                text{
                    font-size: 28rpx;
                }
            }
        }
        .needs-content{
            @include flex();
            flex-direction: row;
            padding: 20rpx 0;
            .needs-content-text{
                width: 100%;
                height: 84rpx;
                line-height: 42rpx;
                font-size: 30rpx;
                @include ellipsis(2);
                padding: 0 20rpx;
            }
            .needs-content-left{
                width: 160rpx;
                height: 110rpx;
                border-radius: 10rpx;
                overflow: hidden;
                margin: 0 20rpx 0 30rpx;
            }
            .needs-content-right{
                width: calc(100% - 240rpx);
                height: 84rpx;
                line-height: 42rpx;
                font-size: 30rpx;
                @include ellipsis(2);
            }
        }
    }
    .red{
        color: #DF3636;
    }
    .green{
        color: #00C735;
    }
    .blue{
        color: #3782FF;
    }
</style>